<template>
  <el-container>
    <el-aside class="category">
      <tg-tree-basic
        ref="ref-category"
        class="category"
        :max-height="treeMaxHeight"
        :hold-height="holdHeight"
        :tree="tree"
        :control-bar="categoryControlBar"
      />
    </el-aside>
    <el-main class="table">
      <tg-control-bar
        v-if="hasControlBar"
        class="control-bar"
        :left-items="controlBarLeftItems"
        :right-items="controlBarRightItems"
      />
      <tg-form-basic-dialog
        ref="ref-searcher"
        :title="searcherTitle"
        :hold-height="searcherHoldHeight"
        :form="searcher"
        :control-bar="searcherControlBar"
        @input="handleSearcherInput($event)"
      />
      <el-table-package
        ref="ref-table"
        :c-m="tableCM"
        :loading="tableLoading"
      />
      <el-pagination-package
        v-show="showPagination"
        class="pagination"
        :total="total"
        :page.sync="page"
        :limit.sync="limit"
        @size-change="doSearch($event)"
        @current-change="loadData($event)"
      />
    </el-main>
  </el-container>
</template>

<script lang="ts">
/*
prop 列表 [参考 TgTable] [参考 TgTreeBasic]
  categoryLinkage  点击分类节点触发，返回的对象将作为表格的 frozenParams
form.CM.meta 扩展 [参考 ElTablePackage] [参考 ElTreePackage]
ref 列表 [参考 TgTable] [参考 TgTreeBasic]
  ref-category
*/
import { Component, Prop } from 'vue-property-decorator'
import { AxiosResponse } from 'axios'
import { Tree } from 'element-ui'
import { TreeProps, TreeNode } from 'element-ui/types/tree'
import { ComponentModel } from '@TG/interface'
import TgTable from './TgTable'
import { isNotEmpty } from '@TG/kit/validate'
import { appModule } from '@TG/store/modules/app'
import ElPaginationPackage from '../ElPackage/ElPaginationPackage.vue'
import ElTablePackage from '../ElPackage/ElTablePackage.vue'
import TgControlBar from '../TgControlBar/index.vue'
import TgFormBasicDialog from '../TgForm/TgFormBasicDialog.vue'
import TgTreeBasic from '../TgTree/TgTreeBasic.vue'

@Component({
  name: 'TgTableCategory',
  components: {
    ElPaginationPackage,
    ElTablePackage,
    TgControlBar,
    TgFormBasicDialog,
    TgTreeBasic
  }
})
export default class extends TgTable {
  @Prop({ type: Object, required: true }) private category!: {
    'node-key': string
    props?: TreeProps
    load?: (node: TreeNode<any, any>, params: any) => Promise<AxiosResponse<any>>
    menu?: ComponentModel
  }
  @Prop({ type: Object }) private categoryControlBar!: {
    leftItems?: ComponentModel[]
    rightItems?: ComponentModel[]
  }
  @Prop({ type: Function, default: (data: any, node: TreeNode<any, any>) => data }) private categoryLinkage!: (data: any, node: TreeNode<any, any>) => any

  private defaultFrozenParams: any = {}

  get treeMaxHeight() {
    return this.adjustHeight(this.maxHeight)
  }

  get tree() {
    return Object.assign({
      treeEvents: { 'current-change': (data: any, node: TreeNode<any, any>) => this.changeCategory(data, node) }
    }, this.category)
  }

  protected adjustHeight(height: number) {
    let maxHeight: number = height
    if (maxHeight === -1) {
      maxHeight = appModule.pageSize.height
      maxHeight -= 50 // topbar 50
      maxHeight -= 34 // tagbar 33 + 1
    }
    return maxHeight
  }

  public initTable(loadData: boolean = true, frozenParams?: any) {
    super.initTable(loadData, frozenParams)
    this.defaultFrozenParams = this.frozenParams
    const treeRef = this.ref('category') as TgTreeBasic
    if (isNotEmpty(treeRef)) {
      treeRef.initTree()
    }
  }

  private changeCategory(data: any, node: TreeNode<any, any>) {
    const categoryData = this.categoryLinkage(data, node)
    if (isNotEmpty(categoryData) && JSON.stringify(categoryData) !== JSON.stringify(this.frozenParams)) {
      this.frozenParams = categoryData
      this.doSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.category {
  background-color: #fff;
  padding: 0px;
}

.table {
  padding: 0px 0px 0px 8px;

  .control-bar {
    margin-bottom: 1px;
  }

  .pagination {
    margin-top: 1px;
    border: 1px solid #dfe6ec;
  }
}
</style>
